<div id="messageRecords">
    <div style="margin:10px 10px 0 10px;height: 35px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 240px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSelectedDev" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder" @on-click="focus"></i-input>
                <transition name="fade">
                    <ul class="search-item-wrapper" v-show="isShowMatchDev">
                        <li class="demo-auto-complete-item" v-for="item in filterData">
                            <div class="demo-auto-complete-group" v-show="item.devices.length" @click="sosoSelectGroup(item.groupname)">
                                <span>{{ item.groupname }}</span>
                            </div>
                            <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.allDeviceIdTitle }}</span>
                            </div>
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
        <div style="margin-left:10px;" class="fl">
            <date-picker type="date" style="width: 120px;" v-model="startDate" :clearable="false" :editable="false"></date-picker>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="prevDay">{{$t("reportForm.beforeDay")}}</i-button>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="nextDay">{{$t("reportForm.afterDay")}}</i-button>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-input style="width:120px;" v-model.trim="filterStr" :placeholder="$t('reportForm.filter')">
                <Icon type="ios-search" slot="suffix" />
            </i-input>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="filterTypeDesc">{{$t("reportForm.filter")}}</i-button>
        </div>
        <div style="margin-left:20px;" class="rt">
            <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </div>
    <Tabs :animated="true">
        <tab-pane :label='$t("reportForm.timeCurve")' style="width:100%;">
            <div style="height: 200px;width:100%;">
                <div id="time_charts" style="height: 200px;width:100%;"></div>
            </div>
        </tab-pane>
        <tab-pane :label='$t("reportForm.reportStatistics")'>
            <div style="height: 200px;">
                <div id="msg_charts" style="width:900px;height:200px;margin: 0 auto;"></div>
            </div>
        </tab-pane>
    </Tabs>
    <div style="margin:0px 10px 10px 10px;">
        <i-table ref="table" :columns="columns" size="small" :height="tableHeight" :data="tableData" :loading="loading" @on-row-dblclick="onRowClick" highlight-row></i-table>
    </div>
    <div style="padding-left:10px;">
        <Page :total="total" show-total @on-change="onChange" :page-size="20" :current="currentIndex" />
    </div>
    <div class="content-wrap" v-show="isShowCard">
        <Card style="width:650px">
            <p slot="title" style="text-align:center;">
                <Icon type="ios-film-outline"></Icon>
                Content
            </p>
            <a href="#" slot="extra" @click.prevent="closeCard">
                <Icon type="ios-loop-strong"></Icon>
                X
            </a>
            <div id="content-string" style="max-height:400px;overflow-y:auto;">
                {{contentString}}
            </div>
        </Card>
    </div>
</div>